<template>
    <div>
        <!--查询框-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="通道名称:">
                <el-input v-model="formInline.channelName" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="状态:">
                <el-select v-model="formInline.status" placeholder="请选择状态">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="停用" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData()" icon="el-icon-search">查询</el-button>
                <el-button type="primary" @click="dialogVisible = true" icon="el-icon-add">添加</el-button>
            </el-form-item>
        </el-form>

        <!--表格-->
        <el-table id="channelList" :data="tableData" height="500px" max-height="500px" size="500px" :highlight-current-row="true" style="width: 100%" class="c-no-wrap">
            <el-table-column align="center" label="通道名称" prop="channelName"></el-table-column>
            <el-table-column align="center" label="通道编码" prop="channelId"></el-table-column>
            <el-table-column align="center" label="运营商" prop="carryOperator"></el-table-column>
            <el-table-column align="center" label="余额" prop="balance"></el-table-column>
            <el-table-column align="center" label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
                    <el-tag v-else-if="scope.row.status == 0" type="error">停用</el-tag>
                    <span v-else></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间" prop="create_time"></el-table-column>
            <el-table-column align="center" label="操作" >
                <template slot-scope="scope">
                    <el-button type="text" @click="handleClick(scope.row)">编辑</el-button>
                    <el-tag v-if="scope.row.status == 1">
                        <el-button type="text" @click="changeStatus(scope.row,0)">停用</el-button>
                    </el-tag>
                    <el-tag v-else-if="scope.row.status == 0">
                        <el-button type="text" @click="changeStatus(scope.row,1)">启用</el-button>
                    </el-tag>
                    <span v-else></span>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div>
            <pageHelper :current-page="currentPage" :total="total" @sizeChange="handleSizeChange"
                        @currentChange="handleCurrentChange"></pageHelper>
        </div>

        <!--通道框-->
        <el-dialog title="通道信息" :visible.sync="dialogVisible" width="500px">
            <template>
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="通道名称:">
                        <el-input v-model="form.channelName" placeholder="请输入账户"></el-input>
                    </el-form-item>
                    <el-form-item label="运营商:">
                        <el-input v-model="form.carryOperator" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名:">
                        <el-input v-model="form.username" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码:">
                        <el-input v-model="form.password" placeholder="请输入电话"></el-input>
                    </el-form-item>
                    <el-form-item label="Key:">
                        <el-input v-model="form.key" placeholder="请输入秘钥"></el-input>
                    </el-form-item>
                    <el-form-item label="接口地址:">
                        <el-input v-model="form.rechargeUrl" placeholder="请输入地址"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitChannel">确定</el-button>
                        <el-button @click="closeDialog">取消</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-dialog>

    </div>

</template>

<script>
    import axios from 'axios';
    import pagination from '@/component/pagination';
    import {mytips} from '@/module/tools';
    import pageHelper from '../common/pageHelper';

    document.title='通道列表';
    export default {
        name: 'channelList',
        components: {pagination,pageHelper},
        data() {
            return {
                form: {
                    channelName: '',
                    carryOperator: '',
                    username: '',
                    password: '',
                    key: '',
                    rechargeUrl: ''
                },
                formInline: {
                    channelName: '',
                    status: '',
                },
                rules: {
                    rechargeMoney: [
                        {required: true,type: 'number',message: '请输入数字金额',trigger: 'change'}
                    ]
                },
                dialogVisible: false,
                //表格数据
                tableData: [
                    {
                        channelName: '广东移动',
                        channelId: '1',
                        carryOperator: '移动',
                        balance: 45.6,
                        status: 1,
                        create_time: '2018-05-01 14:33:33'
                    },
                    {
                        channelName: '上海联通',
                        channelId: '2',
                        carryOperator: '联通',
                        balance: 33,
                        status: 0,
                        create_time: '2018-08-01 14:33:33'
                    }
                ],
                totalPage: 1,
                currentPage: 1,
                pageSize: 10,
                total: 2,
                loading: null
            };
        },

        mounted() {
            this.getData();
        },
        methods: {
            /*翻页跳转处理，传入页数*/
            getData: function (page,size) {
                page = page || 1;
                size = size || 10;

                let target = document.getElementById('channelList');
                this.loading = this.$loading({
                    text: '加载中...',
                    background: 'rgba(0,0,0,0,1)',
                    target: target,
                    spinner: 'el-icon-loading'
                });
                axios.post(
                    API_PATH + "/am/customer",
                    {
                        page: page,
                        pageSize: size,
                        channelName: this.formInline.channelName,
                        status: this.formInline.status
                    }
                ).then(
                    res => {
                        this.loading.close();
                        if (res.data.code == 0) {
                            this.tableData = res.data.data.list;
                            this.totalPage = Math.ceil(res.data.data.total / size);
                            this.total = Math.ceil(res.data.data.total);
                            this.pageSize = size;
                            this.currentPage = page;
                        }
                    },
                    xhr => this.loading.close()
                );
            },
            submitChannel() {
                if (! this.form.channelName) {
                    mytips('请输入通道名称');
                    return false;
                }
                if (! this.form.carryOperator) {
                    mytips('请输入运营商');
                    return false;
                }
                if (! this.form.username) {
                    mytips('请输入用户名');
                    return false;
                }
                if (! this.form.password) {
                    mytips('请输入密码');
                    return false;
                }
                if (! this.form.key) {
                    mytips('请输入key');
                    return false;
                }
                if (! this.form.rechargeUrl) {
                    mytips('请输入接口地址');
                    return false;
                }
                axios.post(
                    API_PATH + '/submitChannel',
                    {
                        channelName: this.form.channelName,
                        carryOperator: this.form.carryOperator,
                        username: this.form.username,
                        password: this.form.password,
                        key: this.form.key,
                        rechargeUrl: this.form.rechargeUrl
                    }
                ).then(res => {
                    if (res.data.code == 0) {
                        this.closeDialog();
                        mytips('提交成功');
                        this.getData();
                    }
                })
            },
            closeDialog() {
                this.dialogVisible = false;
                this.form.channelName = '';
                this.form.carryOperator = '';
                this.form.username = '';
                this.form.password = '';
                this.form.key = '';
                this.form.rechargeUrl = '';
            },
            //每页显示多少条
            handleSizeChange(size) {
                this.pageSize = size;
                this.getData(1,this.pageSize);
            },
            //当前页
            handleCurrentChange(page) {
                this.getData(page,this.pageSize)
            },
            //查看单一项
            handleClick(row) {
                //this.form = row ;会把row的地址一起传过去,会导致,如果清空this.form数据 会把原先表格数据一起取消
                //所以进行每个 值 得传递
                this.form.channelName = row.channelName;
                this.form.carryOperator = row.carryOperator;
                this.form.username = row.username;
                this.form.password = row.password;
                this.form.key = row.key;
                this.form.rechargeUrl = row.rechargeUrl;
                this.dialogVisible = true;
            },
            //启用或者停用通道
            changeStatus(row,status) {
                this.$confirm('确定更改通道状态','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post(
                        API_PATH + '/channelStatus',
                        {
                            channelId: row.channelId,
                            status: status
                        }
                    ).then(res => {
                        if (res.data.code == 0) {
                            mytips('操作成功')
                        }
                    });
                    this.getData();
                }).catch(() => {
                    mytips('已取消')
                })
            }
        }
    }
</script>

